<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
  </head>
  <body>
    <div id="test"></div>

    <script type="text/babel">
      /* 
        函数式定义组件：
          - 组件名首字母要求大写
          - 函数式组件内部需要返回一个虚拟DOM
          - 在

        函数式定义组件的特点：
          - 函数式组件内部this指向为undefined(被babel编译为了严格模式，当React需要这个组件的时候，这个函数就是自己调用)
          - 会被更新并挂载，但是没有生命周期函数
          - 没有this(组件实例)
          - 没有内部状态(state)

        优点：如果某个组件没有用到内部状态state或者其他不具备的功能，则可以使用函数式组件编程，轻量级，简单，效率高
    */
      function Fn() {
        return <h1>我是虚拟DOM</h1>;
      }

      ReactDOM.render(<Fn />, document.getElementById("test"));
    </script>
  </body>
</html>
